<template>
	<view class="add_mdication">
		<text class="mdica_tit">药品信息</text>
		<view class="mdica_item" @click="goToAddMdItem('药品名称')">
			<text class="mdica_item_tit">药品名称</text>
			<view class="mdica_item_vie">
				<text>{{dataInfo.drugName}}</text>
				<image class="item_vie_img" :src="arrImg" mode=""></image>
			</view>
		</view>
		<view class="mdica_item" @click="goToAddMdItem('药品图片')" style="height: 160rpx; line-height: 160rpx;">
			<text class="mdica_item_tit">药品图片</text>
			<view class="mdica_item_vie">
				<image class="item_vie_img1" :src="'https://xcx.shuizhisu.com/' +  dataInfo.drugsImgs" mode=""></image>
				<image style="margin-bottom: 90rpx;" class="item_vie_img" :src="arrImg" mode=""></image>
			</view>
		</view>
		<text class="mdica_tit">药品计量</text>
		<view class="mdica_item" @click="goToAddMdItem('单次服药剂量')">
			<text class="mdica_item_tit">单次服药剂量</text>
			<view class="mdica_item_vie">
				<text>{{dataInfo.dose}}</text>
				<!-- <image class="item_vie_img" :src="dataInfo.drugsImgs" mode=""></image> -->
			</view>
		</view>
		<view class="mdica_item" @click="goToAddMdItem('服药单位')">
			<text class="mdica_item_tit">服药单位</text>
			<view class="mdica_item_vie">
				<text>{{dataInfo.company}}</text>
				<image class="item_vie_img" :src="arrImg" mode=""></image>
			</view>
		</view>
		<text class="mdica_tit">药品时间</text>
		<view class="mdica_item" v-for="(item,index) in dataInfo.addTimeList" :key="index">
			<view class="mdica_item_vie" style="display: flex; justify-content: space-between; width: 100%; color: #999;">
				{{item}}
				<image class="item_vie_img" style="margin-top: 40rpx;" :src="require('../../status/image/delete.png')" mode=""
				 @click="deleteTime(index)"></image>
			</view>
		</view>

		<view class="mdica_item" style="margin-bottom: 10rpx;" @click="addInTime">
			<text class="mdica_item_tit" style="color: #03c97d;">{{addTimes}}...</text>
			<view class="mdica_item_vie">
				<!-- <image class="item_vie_img" :src="arrImg" mode=""></image> -->
			</view>
		</view>

		<view class="mdica_item" @click="goToAddMdItem('服药周期')">
			<text class="mdica_item_tit">服药周期</text>
			<view class="mdica_item_vie"> 
				<!-- <text v-if="cycleTimeList.length == 0">   {{dataInfo.uSelectNum == 1? '每日' : '每隔' + dataInfo.cycleTime}}</text> 
				<text v-else v-for="(item,index) in dataInfo.cycleTimeList" :key="index" v-show="item != null">{{item}}</text> -->
				
				<text v-show="dataInfo.uSelectNum == 1">每日</text>
				<text v-show="dataInfo.uSelectNum == 2 && dataInfo.cycleTimeList.length == 0"> 每隔 {{dataInfo.cycleTime}} </text> 
				<text v-show="dataInfo.cycleTimeList.length > 0 && item != null && dataInfo.uSelectNum == 2" v-for="(item,index) in dataInfo.cycleTimeList" :key="index">{{item}}</text>
				<image class="item_vie_img" :src="arrImg" mode=""></image>
			</view>
		</view>
		<view class="mdica_item" @click="goToAddMdItem('服药开始时间')" style="margin-top: 10rpx;">
			<text class="mdica_item_tit">服药开始日期</text>
			<view class="mdica_item_vie">
				<text>{{dataInfo.medStartTime}}</text>
				<image class="item_vie_img" :src="arrImg" mode=""></image>
			</view>
		</view>
		<view class="mdica_item" @click="goToAddMdItem('服药持续时间')">
			<text class="mdica_item_tit">服药持续时间</text>
			<view class="mdica_item_vie">
				<text>{{dataInfo.continuedTime}}天 </text>
				<image class="item_vie_img" :src="arrImg" mode=""></image>
			</view>
		</view>

		<u-select mode="single-column"  v-model="showUselect" :list="selectList" @confirm="confirm"></u-select>

		<!-- 时间选择 -->
		<u-picker v-model="showSelectTime" mode="time" @confirm="changeMedStartTime"></u-picker>
		<!-- 添加时间 -->
		<u-picker v-model="showTimeConfirm" mode="time" :params="params" @confirm="addTimeConfirm"></u-picker>

		<view class="add_mdica" @click="drugAdd">
			<text>确认添加</text>
		</view> 
			<u-loading class="loading_icon" :show="loadingIcon" color="#ff4544" size="60"></u-loading>
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选择器
				showUselect: false,
				// 时间选择
				showSelectTime: false,
				// 上传图片loading加载
				loadingIcon: false,
				dataInfo: {
					// 药名
					drugName: '请输入药品名称',
					// 药品图片
					drugsImgs: '',
					// 单次服药计量
					dose: 0,
					// 服药单位
					company: '片',
					// 服药单位上传数据
					companyType: 0,
					// 添加时间
					addTimeList: [],
					// 服药周期
					uSelectNum: 1,
					uSelectNumType: 0,
					// 选择自定义数据
					cycleTime: null,
					// 格式化
					cycleTimeList:[],
					// 服药开始时间
					medStartTime: '选择开始时间',
					// 服药持续天数
					continuedTime: '单位:'
				},
				// 添加时间
				addTimes: '添加时间',
				// 添加时间弹框
				showTimeConfirm: false,
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				selectList: [{
						value: '1',
						label: '片'
					},
					{
						value: '2',
						label: '粒'
					},
					{
						value: '3',
						label: '喷'
					},
					{
						value: '4',
						label: '个'
					},
					{
						value: '5',
						label: '袋'
					},
					{
						value: '6',
						label: '毫升'
					},
				],
				arrImg: require('../../status/image/arr.png'),

			};
		},
		onLoad(options) {
			let that = this

			uni.getStorage({
				key: 'dataInfo',
				success(res) {
					res? that.dataInfo = JSON.parse(res.data): '' 
					options.drugName ? that.dataInfo.drugName = options.drugName : null
					options.dose ? that.dataInfo.dose = options.dose : null
					options.continuedTime ? that.dataInfo.continuedTime = options.continuedTime : null
					options.uSelectNum ? that.dataInfo.uSelectNum = options.uSelectNum : null
					options.cycleTime?  that.dataInfo.cycleTime = options.cycleTime : null  
					// 判断是否选择了间隔天数
					if(that.dataInfo.cycleTime.indexOf(',') != '-1'){
						let newArr = that.dataInfo.cycleTime.split(',').sort()
						let cycleTimeList = []
						newArr.map(item => { 
							switch(item){
								case '0':
								cycleTimeList[6] = '周日';
								break;
								case '1':
								cycleTimeList[0] = '周一';
								break;
								case '2':
								cycleTimeList[1] = '周二';
								break;
								case '3':
								cycleTimeList[2] = '周三';
								break;
								case '4':
								cycleTimeList[3] = '周四';
								break;
								case '5':
								cycleTimeList[4] = '周五';
								break;
								case '6':
								cycleTimeList[5] = '周六';
								break; 
								
							}
						}) 
						that.dataInfo.cycleTimeList = cycleTimeList
					}
				}
			})

		},
		methods: {
			goToAddMdItem(type) {
				let that = this
				if (
					type === '药品名称' ||
					type === '服药周期' ||
					type === '单次服药剂量' ||
					type === '服药持续时间'
				) {
					uni.redirectTo({
						url: '../addMdItem/index?type=' + type
					})
				} else if (type === '服药单位') {
					that.showUselect = true
				} else if (type === '服药开始时间') {
					that.showSelectTime = true
				} else if (type === '药品图片') {
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success(info) { 
							that.loadingIcon = true 
							uni.uploadFile({
								url: 'https://xcx.shuizhisu.com/api/uploadCompress/imgBase64',
								filePath: info.tempFilePaths[0], 
								name: 'file',
								header:{
									"Content-Type": "multipart/form-data", 
								},
								formData:{
									"token": uni.getStorageSync('token')? uni.getStorageSync('token'):''
								},
								success: (res) => {  
									that.loadingIcon = false  
									let data = JSON.parse(res.data) 
									if(data.code >= 0){
										that.dataInfo.drugsImgs = data.data.pic_path
									}   
								}
							}) 
							// that.urlTobase64(info.tempFilePaths[0]) 
						}
					})
				}
			}, 
			// 添加时间
			addInTime() {
				this.showTimeConfirm = true
			},
			confirm(e) {
				this.dataInfo.company = e[0].label
				this.dataInfo.companyType = e[0].value
			},
			changeMedStartTime(e) {
				this.dataInfo.medStartTime = e.year + '-' + e.month + '-' + e.day 
			},
			// 添加时间
			addTimeConfirm(e) {
				let time = e.hour + ':' + e.minute
				if (this.dataInfo.addTimeList.indexOf(time) == -1) {
					this.dataInfo.addTimeList.push(time)
				}
			},
			// 删除时间
			deleteTime(index) {
				this.dataInfo.addTimeList.splice(index, 1)
			},
			// 添加服药计划
			drugAdd(){     
				if(this.dataInfo.drugName == '请输入药品名称') {
					uni.showToast({
						title: '请输入药品名称',
						icon: 'none',
						duration: 1000
					})
					return false
				}
				if(this.dataInfo.dose == '0') {
					uni.showToast({
						title: '请输入单次服药剂量',
						icon: 'none',
						duration: 1000
					})
					return false
				}
				if(this.dataInfo.medStartTime == '请输入服药开始时间') {
					uni.showToast({
						title: '请输入服药开始时间',
						icon: 'none',
						duration: 1000
					})
					return false
				}
				if(this.dataInfo.addTimeList.length == 0) {
					uni.showToast({
						title: '请添加药品时间',
						icon: 'none',
						duration: 1000
					})
					return false
				}
				if(this.dataInfo.continuedTime == '单位') {
					uni.showToast({
						title: '请输入服药持续时间',
						icon: 'none',
						duration: 1000
					})
					return false
				} 
				this.$api.sendRequest({
					url : '/api/drug/add', 
					data:{
						drug_name: this.dataInfo.drugName,
						drug_num: this.dataInfo.dose,
						drug_unit: this.dataInfo.companyType || 1,
						drug_time: this.dataInfo.addTimeList,
						// 服药周期，如果是每日，传1 否则传2
						// cycle_type: this.dataInfo.uSelectNum == '每日'? '1':'2',
						cycle_type: this.dataInfo.uSelectNum,
						// 服药周期，自定义天数
						cycle_time: this.dataInfo.uSelectNum == 1? [] :this.dataInfo.cycleTime.split(','),
						start_time: this.dataInfo.medStartTime,
						until_date: this.dataInfo.continuedTime, 
						drug_img: this.dataInfo.drugsImgs
					}, 
					header: {'content-type': 'application/json'},
					success: res => {
						if(res.code >= 0){
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							uni.removeStorage({key: 'dataInfo'})
							// 重置data数据
							Object.assign(this.$data, this.$options.data())
							setTimeout(() => {
								uni.navigateBack(1)
							},1000)
						}else{
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				})
			}
		},
		onUnload() {
			uni.setStorageSync('dataInfo', JSON.stringify(this.dataInfo))
		}
	}
</script>

<style lang="less">
	.add_mdication {
		.mdica_tit {
			padding: 0 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			color: #c1c5c6;
		}

		.mdica_item {
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #dfd4da;

			.mdica_item_vie {
				line-height: 100rpx;
				color: #999;

				.item_vie_img1 {
					margin-top: 24rpx;
					width: 100rpx;
					height: 100rpx;
					background-color: #d7ccd2;
					border: 1rpx solid #cdc1c7;
				}

				.item_vie_img {
					margin-left: 20rpx;
					width: 30rpx;
					height: 30rpx;
					vertical-align: middle;
				}
			}
		}

		.add_mdica {
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
			margin: 30rpx;
			border-radius: 20rpx;
			background-color: #03c97d;
		}
		.loading_icon{
			position: fixed;
			top: 45%;
			left: 50%;
			transform: translate(-50%,-50%); 
		}
	}
	.u-select__body{
		view {
			font-size: 40rpx !important;
		} 
	}
</style>
